<?php
include 'logic_layer.php';

if (!isset($_SESSION)) {
    session_start();
}

//make sure the session starts from the index page
//and that the session step matched current page
if (!isset($_SESSION["step"]) || $_SESSION["step"] != "cfq1") {
    header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Describe Experience</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="assets/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Questionnaire -->
        <link href="questionnaire.css" rel="stylesheet" media="screen">
        <!-- Main -->
        <link href="main.css" rel="stylesheet" media="screen">

    </head>

    <body>
        <!-- Part 0: Steps -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="steps ">
                    <p class="steps-done">Welcome &#10140; Choose Scenario &#10140; </p>
                    <p class="step-current">Describe Experience</p>
                    <p class="steps-pending"> &#10140; Questionnaires</p>
                </div>
            </div>
        </div>

        <!-- Part 1: Wrap all page content here -->
        <!-- Begin page content -->
        <div class="container">
            <div class="page-header">
                <h1>Describe Experience</h1>
            </div>

            <form class="form-horizontal" role="form" action='index.php' method='post' name='frm' id='frm'>

                <!-- Q1 -->
                <div class="question compulsory" id='q1'>
                    <p>Please describe a recent or most memorable personal experience of the scenario you chose in the previous step.</p>
                    <div class="open-ended">
                        <textarea  name="inputQ1"></textarea>
                    </div>
                </div>

                <!-- --------- -->
                <input type="hidden" value="cfq2" name="step" />
            </form>
            <hr>

            <div id="unanswered" class="alert alert-error">
                Please answer all of the questions.
            </div>

            <br>
            <button class="btn btn-success btn-large" onclick="continueStudy();" type="button">Continue</button>
            <br>
            <br>

        </div>


        <!-- Le javascript
        ================================================== -->
        <script src="assets/js/jquery/jquery-2.0.3.min.js"></script>
        <script src="assets/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/bootbox/bootbox.min.js"></script>

        <script>
                var highlightUnanswered = function () {
                    //scale rate and checkbox and multiple choices
                    $('.question input[name*="inputQ"]').each(function () {
                        var input = $(this);
                        var name = input.attr("name");
                        //reset background color
                        if (input.parent().parent().attr("class").indexOf("compulsory") > -1) {
                            input.parent().parent().attr("class", "question compulsory");
                        } else {
                            input.parent().parent().attr("class", "question");
                        }
alert($("input[name='" + name + "']").val())
                        if (!isBlank($("input[name='" + name + "']").val()) && !isEmpty($("input[name='" + name + "']").val())) {
                            if (input.parent().parent().attr("class").indexOf("compulsory") > -1) {
                                input.parent().parent().attr("class", "question compulsory alert-error");
                            } else {
                                input.parent().parent().attr("class", "question alert-error");
                            }
                        }

                    });
                }

                var submitForm = function () {
                    //add questions inputs
                    $('.question').each(function () {
                        //question                
                        var question = $(this).children(':first-child').html();
                        $('#frm').append('<input type="hidden" name="question_' + $(this).attr("id") + '" value="' + question + '" />');
                        //question type
                        var questionType = $(this).children(':first-child').next().attr('class');
                        $('#frm').append('<input type="hidden" name="question_type_' + $(this).attr("id") + '" value="' + questionType + '" />');
                    });
                    //submit form
                    $('#frm').submit();
                }

                var continueStudy = function () {
                    $('#unanswered').hide();
                    var fieldEmpty = false;
                    //scale rate and checkbox and multiple choices
                    $('.compulsory input[name*="inputQ"]').each(function () {
                        var input = $(this);
                        var name = input.attr("name");
                        if (!isBlank($("input[name='" + name + "']").val()) && !isEmpty($("input[name='" + name + "']").val())) {
                            fieldEmpty = true;
                            console.log(name)
                        }

                    });
                    //check if any compulosy field is empty
                    if (fieldEmpty) {
                        highlightUnanswered();
                        $('#unanswered').show();
                    } else {
                        // go to the next step
                        submitForm();
                    }
                }

                function isBlank(str) {
                    return (!str || /^\s*$/.test(str));
                }

                function isEmpty(str) {
                    return (!str || 0 === str.length);
                }
                $('#unanswered').hide();
        </script>
    </body>
</html>
